<template>
  <cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
    <cl-pagefull>
      <template #head>
        <el-form class="search-form" :model="search" ref="form" inline>
          <el-form-item label="所属事业部" prop="biz_id">
            <cl-select v-model="search.biz_id" placeholder="请选择" filterable @change="changeBiz" style="width: 100%">
              <el-option v-for="item in business" :key="item.biz_id" :label="item.biz_name" :value="item.biz_id" />
            </cl-select>
          </el-form-item>
          <!-- <el-col :lg="8" :md="12" :sm="24">
							<el-form-item label="分公司" prop="company_id">
								<cl-select
									v-model="search.company_id"
									placeholder="请选择"
									filterable
									style="width: 100%"
									clearable
									@change="refresh()"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in companyList"
										:key="item.company_id"
										:label="item.company_name"
										:value="item.company_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :lg="8" :md="12" :sm="24">
							<el-form-item label="品牌" prop="bra_id">
								<cl-select
									v-model="search.bra_id"
									placeholder="请选择"
									filterable
									style="width: 100%"
									clearable
									@change="refresh()"
								>
									<el-option label="全部" value="" />
									<el-option
										v-for="item in brandList"
										:key="item.bra_id"
										:label="item.bra_name"
										:value="item.bra_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col> -->
          <el-form-item label="门店" prop="dept_id">
            <cl-shop-select v-model="search.dept_id" placeholder="请选择" filterable style="width: 100%" clearable
              @change="refresh()" show-all :biz_id="search.biz_id" />
          </el-form-item>
          <el-form-item label="客户关键字" prop="search_content">
            <el-input v-model="search.search_content" placeholder="微信号/手机号/会员号/姓名" clearable style="width: 100%"
              @change="refresh()" />
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" :disabled="!search.search_content" :loading="loading"
            @click="refresh()" size="small">
            查找
          </el-button>
          <el-button size="small" @click="reset" :disabled="!search.search_content || loading">
            重置
          </el-button>
        </el-form>
      </template>

      <el-row>
        <!-- 数据表格 -->
        <cl-table v-bind="table">
          <cl-empty slot="empty" tips="暂无数据，请输入关键字查询" />
          <template #column-inherit_id="{ scope: { row } }">
            <div :class="{ 'color-success': !!row.inherit_id }">
              {{ !!row.inherit_id ? "是" : "否" }}
            </div>
          </template>
          <template #column-cus_img="{ scope: { row } }">
            <cl-customer class="customer" :gender="row.cus_sex"  make-call
             :avatar="row.cus_img" />
          </template>
          <template #column-opt="{ scope: { row } }">
            <div class="flex flex-align-start" v-if="!browser.isMobile">
              <el-button type="primary" @click="openDetail(row)" v-auth="'store_cusdetailindex_look'">
                详情
              </el-button>
              <el-button type="danger" @click="removeClick(row)">
                删除
              </el-button>
              <el-button type="success" @click="openAddCus(row)" v-if="Number(row.inherit_id) <= 0">新增重粉客户</el-button>
            </div>
            <el-dropdown class="ml-1" size="medium" v-else>
              <el-button>
                更多<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button type="primary" @click="openDetail(row)" v-auth="'store_cusdetailindex_look'">
                    详情
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button type="danger" @click="removeClick(row)">
                    删除
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button type="success" @click="openAddCus(row)"
                    v-if="Number(row.inherit_id) <= 0">新增重粉客户</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </cl-table>
      </el-row>
      <!-- <el-row type="flex">
				<cl-flex1 />
				<zm-pagination />
			</el-row> -->
    </cl-pagefull>
  </cl-crud>
</template>

<script>
import pageMinix from "@/mixins/page";
import { mapState, mapGetters } from "vuex";

export default {
  name: "CusShopCustomerSearch",
  inject: ["$layout"],
  mixins: [pageMinix],

  data() {
    return {
      visible: false,
      table: {
        "context-menu": ["refresh"],
        columns: [
          {
            label: "客户姓名",
            prop: "cus_name",
            minWidth: 150,
            align: "left",
            showOverflowTooltip: true
          },
          { label: "头像", prop: "cus_img", width: 100, align: "left" },
          { label: "是否重粉", width: 80, prop: "inherit_id" },
          { label: "微信号", prop: "cus_wx", minWidth: 120 },
          { label: "手机号", prop: "cus_mobile", minWidth: 100 },
          {
            label: "品牌",
            prop: "bra_name",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "所属门店",
            prop: "dept_name",
            minWidth: 120,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "所属人",
            prop: "belonger",
            minWidth: 120,
            align: "left",
            showOverflowTooltip: true
          },
          { label: "创建时间", prop: "addtime", width: 90 },
          { label: "首次下定时间", prop: "first_deposit", width: 140 },
          { label: "操作", prop: "opt", width: 260, fixed: "right" }
        ]
      },
      // companyList: [],
      // brandList: [],
      shopList: [],
      search: {
        // search_type: 0, //搜索类型(0-全部 ,1-手机,2-客户名称,4-微信)
        search_content: "", //搜索名字
        biz_id: "", //事业部
        // bra_id: "",
        // company_id: ""
        dept_id: ""
      },
      keyword: "",
      total: 0,
      loading: false,
      //重粉
      empty: false //true =>有 false => 无
    };
  },
  computed: {
    ...mapState("common", ["visibleCusDetail", "cusFormSubmit"]),
    ...mapGetters(["browser"]),
    bizRefData() {
      const { biz_id } = this.search;
      return this.getBizRefData(biz_id);
    }
  },
  created() {
    this.search.biz_id = this.getCurrBiz();
    this.init();
  },
  methods: {
    openAddCus(row) {
      if (!this.empty) {
        this.$layout.openAddCus();
        this.$layout.getSearch({
          biz_id: this.search.biz_id,
          dept_id: this.search.dept_id
        });
      } else {
        const { cus_mobile, dept_id } = row;
        // if (!cus_mobile || cus_mobile == "-" || !dept_id) {
        // 	const promptStr =
        // 		!cus_mobile && !dept_id
        // 			? "所属门店和手机号"
        // 			: !cus_mobile || cus_mobile == "-"
        // 			? "手机号"
        // 			: "所属门店";
        // 	this.$message.warning(`客户信息未完善，请完善客户的${promptStr}!`);
        // 	return;
        // }
        this.$layout.openAddCus(row, { haveFan: true });
      }
    },
    onLoad({ ctx, app }) {
      ctx.service(this.$service.customer)
        .set("dict", { api: { page: "searchCus" } })
        .done();
      app.refresh();
    },
    async onRefresh(params, { next, render, done }) {
      // if (params.search_content && params.search_content.length < 2) {
      // 	this.$message.error("使用关键字搜索时中文至少2位查询，其他至少4位可查询");
      // 	return done();
      // }
      this.loading = true;
      const { search_content } = this.search;
      this.empty = false;
      this.total = 0;
      this.keyword = search_content;
      if (!search_content) {
        render([]);
        this.loading = false;
        return;
      }
      const list = await next({
        ...params,
        ...this.search
      });
      this.total = list.length;
      this.empty = !!list.length;
      if (this.browser.isMobile) {
        this.table.columns[this.table.columns.length - 1].width = 100;
      }
      render(list);
      this.loading = false;
      if (!this.empty && this.$auth("store_shopaddcus")) {
        this.confirm("暂无此客户，是否立即添加").then(() => {
          this.openAddCus();
        });
      }
    },
    // crud刷新
    refresh() {
      console.log("crud");
      const refresh = this.$refs.crud.refresh;
      refresh && refresh({ page: 1, ...this.search });
    },
    // 打开详情
    openDetail(row) {
      this.$layout.openCusDetail(row, "new-appoint");
    },
    // 删除
    removeClick({ cus_id, biz_id }) {
      this.confirm()
        .then(async () => {
          await this.$service.customer.del({ cus_id, biz_id });
          this.$message.success("操作成功");
          this.refresh();
        })
        .catch(() => { });
    },
    reset() {
      this.search = {
        ...this.search,
        search_content: "",
        bra_id: "",
        company_id: "",
        dept_id: ""
      };
      this.empty = false;
      this.$refs.form.resetFields();
      this.init();
      this.refresh();
    },
    init() {
      const { biz_id } = this.search;
      this.getBizRefShop(biz_id);
    },
    changeBiz() {
      this.search = {
        ...this.search,
        bra_id: "",
        company_id: "",
        dept_id: ""
      };
      this.init();
      this.refresh();
    }
  }
};
</script>

<style lang="scss" scoped>
	.customer {
		display: inline-block;
		.cus-avatar,
		.cl-avatar {
			width: 80px;
			height: 80px;
		}
		.cus-avatar .cus-gender {
			width: 20px;
			height: 20px;
		}
		.cus-info {
			line-height: 1.8;
		}
		.cus-name {
			margin-bottom: 4px;
			font-size: 16px;
		}
	}
</style>
